import {
  RectNode,
  RectNodeModel,
  HtmlNodeModel,
  HtmlNode,
  BezierEdge,
  BezierEdgeModel,
  h,
} from "@logicflow/core";
/// ------------------------ 自定义节点 -----------------------
class AnimatRectModel extends RectNodeModel {
  // // 节点model 数据层
  // setAttributes() {
  //   const properties = this.getProperties();
  //   this.width = properties.width || 100;
  //   this.height = properties.height || 100;
  // }
}
class AnimatView extends RectNode {
  // 节点视图 渲染层

  getShape() {
    const { x, y, width, height, stroke, fill, strokeWidth, properties } =
      this.props.model;
    const attrs = {
      // rect 标签的 x，y 对应的是图形的左上角
      // 所以我们要将矩形的中心移动到 x，y
      x: x - width / 2,
      y: y - height / 2,
      width,
      height,
      stroke,
      fill,
      strokeWidth,
    };
    return h(
      "g",
      {
        x: 0,
        y: 0,
        width,
        height,
      },
      [
        h("defs", {}, [
          h(
            "pattern",
            {
              id: properties.img,
              x: 0,
              y: 0,
              width: "100%",
              height: "100%",
              patternContentUnits: "objectBoundingBox",
            },
            [
              h("image", {
                width: 1,
                height: 1,
                "xlink:href": properties.img,
              }),
            ]
          ),
        ]),
        h("rect", {
          ...attrs,
          fill: `url(#${properties.img})`,
          // stroke: "red",
          // strokeWidth: 1,  //边框
        }),
      ]
    );
  }
}
export const AnimatRect = {
  type: "animat-rect",
  view: AnimatView,
  model: AnimatRectModel,
};

/// ------------------ html节点-----------------------
class HtmlRectModel extends HtmlNodeModel {
  setAttributes() {
    const { width, height } = this.getProperties();
    this.width = width || 150;
    this.height = height || 80;
  }
}
class HtmlRectView extends HtmlNode {
  setHtml(rootEl) {
    const { properties } = this.props.model;
    const el = document.createElement("div");
    el.innerHTML = properties.htmlstr;
    rootEl.appendChild(el);
  }
}
export const HtmlRect = {
  type: "html-rect",
  view: HtmlRectView,
  model: HtmlRectModel,
};

/// ------------------自定义边 ------------------------
class AnimatEdgeModel extends BezierEdgeModel {
  // 边model 数据层
  setAttributes() {
    this.isAnimation = true;
    // this.style.stroke = "blue";
  }
  // getEdgeAnimationStyle() {
  //   // const style = super.getEdgeAnimationStyle();
  //   // style.strokeDasharray = "5 5";
  //   // style.strokeDashoffset = "100%";
  //   // style.animationDuration = "10s";
  //   // style.stroke = "green";
  //   // return style;
  // }
}
class AnimatEdgeView extends BezierEdge {
  // 边视图 渲染层
}

export const AnimatEdge = {
  type: "animat-line",
  view: AnimatEdgeView,
  model: AnimatEdgeModel,
};

export const TestData = {
  // 节点
  nodes: [
    {
      id: 50,
      type: "rect",
      x: 100,
      y: 150,
      text: "你好",
      properties: {
        radius: 8,
        /* width: 100, height: 100 */
      },
    },
    {
      id: 21,
      type: "circle",
      x: 300,
      y: 150,
      text: "圆",
      properties: { r: 50 },
    },
    {
      id: 24,
      type: "animat-rect",
      x: 450,
      y: 150,
      text: "自定义节点",
      properties: { img: "/sun.png", width: 120, height: 120 },
    },
    {
      id: 24,
      type: "html-rect",
      x: 500,
      y: 300,
      properties: {
        width: 150,
        height: 40,
        htmlstr: `
          <table border="1" class="node-table">
            <tr>
              <td>属性A:</td>
              <td>110343</td>
            </tr>
              <tr>
              <td>属性B:</td>
              <td>AAACCFFGG</td>
            </tr>
          </table>
        `,
      },
    },
  ],
  // 边
  edges: [
    {
      type: "animat-line",
      sourceNodeId: 50,
      targetNodeId: 21,
      isAnimation: true,
      properties: {
        style: { stroke: "blue" },
      },
    },
  ],
};
